<template>
<div id="applyequip">
    <group label-width="7em" title="详情">
        <cell title="编号：">{{this.list.id}}</cell>
        <cell title="学号：">{{this.list.userId}}</cell>
        <cell title="姓名：">{{this.list.name}}</cell>
        <cell title="联系方式：">{{this.list.phone}}</cell>
        <cell title="借领时间：">{{this.list.startTime}}</cell>
        <cell title="归还时间：">{{this.list.endTime}}</cell>
        <cell title="申请使用状态">{{this.list.status}}</cell>
        <x-textarea title="用途：" readonly :rows="5" :value="this.list.purpose"></x-textarea>
        <cell v-if='button'>
            <x-button type="primary" mini @click.native="applyback(list.id)">申请归还</x-button>
        </cell>
    </group>
    <div v-transfer-dom>
        <loading :show="show1" text="加载中..."></loading>
    </div>
    <group label-width="7em" title="申请的设备" v-for="(item,index) in equiplist" :key="index">
        <cell title="设备号：" :value='item.device.id'></cell>
        <cell title="数量：" :value="item.Count"></cell>
        <cell title="设备名称：" :value="item.device.name"></cell>
        <cell title="型号：" :value="item.device.model"></cell>
        <cell title="借出的状态：" :value="item.sstatus"></cell>
        <cell title="归还时的状态：" :value="item.fstatus"></cell>
    </group>
</div>
</template>

<script>
import {Group, Cell, FormPreview, XTable, XButton, Loading, XTextarea, TransferDomDirective as TransferDom} from 'vux'

export default {
  name: 'applyequip',
  directives: {
    TransferDom
  },
  components: {
    Group,
    XButton,
    Cell,
    Loading,
    XTextarea,
    FormPreview,
    XTable
  },
  methods: {
    applyback (i) {
      this.$http.post('/items_weixin/facility/getInfo', {'id': i}).then((res) => {
        if (res.data.code === 0) {
          alert(res.data.content)
          this.$router.push('/')
        } else {
          alert('申请失败！！')
        }
      })
    },
    getdetail (i) {
      this.$http.get('/api/items/deviceApply/' + i).then((res) => {
        let a = res.data.content
        console.log(a)
        this.list.id = a.id
        this.list.userId = a.userId
        this.list.name = a.name
        this.list.phone = a.phone
        this.list.startTime = a.startTime
        this.list.endTime = a.endTime
        this.list.status = a.status
        this.list.purpose = a.purpose
        this.show1 = false
        console.log(a.status)
        switch (a.status) {
          case 0:
            this.list.status = '审核中'
            this.button = false
            break
          case 1:
            this.list.status = '已通过'
            this.button = false
            break
          case 2:
            this.list.status = '未通过'
            this.button = false
            break
          case 3:
            this.list.status = '使用中'
            console.log(this.list.status)
            this.button = true
            break
          case 4:
            this.list.status = '已归还'
            this.button = false
            break
          case 5:
            this.list.status = '申请归还'
            this.button = false
            break
        }
        this.equiplist = a.devicelist
      })
    }
  },
  data () {
    return {
      list: {
        'id': '',
        'userId': '',
        'name': '',
        'phone': '',
        'startTime': '',
        'endTime': '',
        'status': 0,
        'purpose': ''
      },
      equiplist: [],
      show1: true,
      button: false,
      status: 1
    }
  },
  watch: {
    // status: {
    //   handler: function (val, oldVal) {
    //     this.getdetail(val)
    //   },
    //   deep: true
    // }
  },
  created () {
    this.status = this.$route.query.equipid
    this.getdetail(this.status)
  }
}
</script>

<style>
body{
    background-color: #eee;
}
#applyequip{
    padding-top: 40px;
}
</style>
